<template>
    <div class="info-cont">
        <!-- <div class="title">基础信息</div> -->
        <div class="profile">
            <div>头像</div>
            <van-uploader :after-read="settingHeader">
                <van-image
                    :src="`http://cq-photo.oss-cn-huhehaote.aliyuncs.com/` + computInfo.avatar"
                    width="50"
                    height="50"
                    round
                    fit="cover"
                />
            </van-uploader>
        </div>
        <div class="profile">
            <div>姓名</div>
            <input v-model="computInfo.nickname" type="text" class="name">
        </div>
        <div class="profile" @click="_=> computInfo.gender = computInfo.gender == 1 ? 2 : 1">
            <!-- <div class="profile"> -->
            <div>姓别</div>
            <div class="sex">{{ computInfo.gender|sex }}</div>
        </div>
        <div class="profile" @click="_=> dataShow = true">
            <div>年龄</div>
            <div class="age">{{ computInfo.birthday | age }}</div>
        </div>
        <div class="profile" @click="_=> xingzuoShow = true">
            <div>星座</div>
            <div class="sign">{{ xingzuoData.name }}</div>
        </div>
        <div class="profile">
            <div>微信号</div>
            <input v-model="computInfo.wechat" type="text" class="name" style=" color: #f45050; font-weight: bold;">
        </div>
        <div class="profile">
            <div>所在单位</div>
            <div class="part">{{ bumenData.name }}</div>
        </div>
        <div class="profile tag">
            <div>兴趣</div>
            <div class="name">最多选择四个标签</div>
        </div>
        <taglist :checked="computInfo.hobby" :can-check="true" :show-all="true" />
        <div class="profile Declara">
            <div style="padding: 20px 0 10px">宣言</div>
            <textarea v-model="computInfo.bio" class="declara" placeholder="请简单描述你的交友宣言" />
        </div>
        <!-- 选择日期 -->
        <van-popup v-model="dataShow" round position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="_=> dataShow = false"
                @confirm="settingAge"
            />
        </van-popup>
        <!-- 选择星座 -->
        <van-popup v-model="xingzuoShow" round position="bottom" :style="{ height: '40%' }">
            <van-picker
                :columns="xingzuo"
                value-key="name"
                show-toolbar
                @cancel="_=> xingzuoShow = false"
                @confirm="settingXingzuo"
            />
        </van-popup>
        <!-- 选择部门 -->
        <van-popup v-model="bumenShow" round position="bottom" :style="{ height: '40%' }">
            <van-picker
                :columns="bumen"
                value-key="name"
                show-toolbar
                @cancel="_=> bumenShow = false"
                @confirm="settingBumen"
            />
        </van-popup>
        <!-- 保存按钮 -->
        <div class="container-save-btn" @click="submit">保存并退出</div>
    </div>
</template>
<script>
/* eslint semi: [error, always]  */
import { mapGetters } from 'vuex';
import taglist from '@/components/tag';
// api
import { profileChange } from '@/api/miva_user';
import { uploadImage } from '@/api/miva_utils';
export default {
    components: {
        taglist: taglist
    },
    filters: {
        sex(sex) {
            const sexMap = {
                1: '男',
                2: '女',
                3: '未知'
            };
            return sexMap[sex];
        },
        age(date) {
            if (!date) {
                return 0;
            }
            const nowYear = new Date().getFullYear();
            const ageYear = new Date(date).getFullYear();
            return nowYear - ageYear;
        }
    },
    data() {
        return {
            computInfo: {},
            xingzuoData: {},
            bumenData: {},
            bumenShow: false,
            xingzuoShow: false,
            dataShow: false,
            minDate: new Date(`1931-9-18`),
            maxDate: new Date(),
            currentDate: new Date(`1994-2-11`)
        };
    },
    computed: {
        ...mapGetters(['userInfo', 'xingzuo', 'bumen'])
    },
    created() {
    // 复制一份用户信息
        this.computInfo = { ...this.userInfo };
        // 设置兴趣标签
        this.computInfo.hobby = this.computInfo.hobby.split(',');
        // 设置出生日期
        if (this.computInfo.birthday) {
            this.currentDate = new Date(this.computInfo.birthday);
        }
        // 设置星座
        this.xingzuoData = this.xingzuo.find(obj => obj.id === this.computInfo.constellation) || {};
        // 设置部门
        this.bumenData = this.bumen.find(obj => obj.id === this.computInfo.department_id) || {};
        // 设置头像
        const firstIndex = this.computInfo.avatar.indexOf('.com/');
        const lastIndex = this.computInfo.avatar.indexOf('?');
        const image = this.computInfo.avatar.slice(firstIndex + 5, lastIndex);
        this.computInfo.avatar = image;
    },
    methods: {
        async submit() {
            const res = await profileChange(this.computInfo);
            if (res.code === 1) {
                this.$router.replace({ name: 'my' });
            } else {
                this.$dialog({ message: res.msg });
            }
        },
        settingAge(value) {
            this.dataShow = false;
            this.computInfo.birthday = value.toLocaleDateString().replace(/\//g, '-');
        },
        settingXingzuo(value) {
            this.xingzuoShow = false;
            this.computInfo.constellation = value.id;
            this.xingzuoData = value;
        },
        settingBumen(value) {
            this.bumenShow = false;
            this.computInfo.department_id = value.id;
            this.bumenData = value;
        },
        async settingHeader(file) {
            const formData = new FormData();
            formData.append('file', file.file);
            const { data: { image_adr = '' }} = await uploadImage(formData);
            const firstIndex = image_adr.indexOf('.com/');
            const lastIndex = image_adr.indexOf('?');
            const image = image_adr.slice(firstIndex + 5, lastIndex);
            this.computInfo.avatar = image;
        }
    }
};
</script>

<style lang="less" scoped>
.container-save-btn {
  width: 100%;
  padding: 10px;
  position: fixed;
  left: 0;
  bottom: 0;
  text-align: center;
  background-color: #f45050;
  color: #fff;
}
</style>

<style scoped>
.info-cont {
  width: 90%;
  margin: 3% auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 150px;
  font-size: 0.9375rem;
  margin-top: 2vw;
}
.profile {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e5e5;
  align-items: center;
  color: #666;
  font-weight: bold;
}
.up-pic {
  border: 1px solid #000;
  position: absolute;
  right: 3%;
  top: 14%;
  border-radius: 50px;
  opacity: 0;
}
.title {
  font-size: 18px;
  color: #e06363;
  display: block;
  width: 100%;
}
.pro-btn {
  overflow: hidden;
  background: #ccc;
  border-radius: 50%;
  margin-top: -15px;
}
.exit-btn {
  width: 100%;
  vertical-align: top;
  text-align: center;
}
.name {
font-size:0.9375rem;
}
.age,
.sign,
.wechatId {
  color: #f45050;
  font-weight: bold;
}
.sex,
.part,
.name {
  font-size: 0.8rem;
  color: #999999;
}
select {
  border: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  height: 37px;
}
select::-ms-expand {
  display: none;
}
option {
  text-align: right;
}
.next-btn {
  width: 100%;
  margin: 0 auto;
  height: 50px;
  line-height: 50px;
  background: #e06363;
  position: fixed;
  bottom: 0;
  text-align: center;
  color: #fff;
}
.next-img {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
input {
  padding: 0 3px;
  border: none;
  background: none;
  color: #202124;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  border-radius: 6px;
  text-align: right;
}
.tag,
.Declara {
  border: none;
}
.tagList {
  width: 100%;
}
.declara {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  /* background-color: #f2f2f2; */
  padding: 5px;
  border: 1px solid #e5e5e5;
  font-weight:normal;
}
</style>
